@import '../styles/common.scss';
.b_detail{
    @include padding_top__box();

    .icon_complaint {
        position: absolute;
        top: calc(10px * 2);
        right: calc(12px * 2);
        width: calc(17px * 2);
        height: calc(20px * 2);
        object-fit: contain;
    }

     .action_sheet {
        .header {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            height: calc(40px * 2);
            padding: 0 calc(12px * 2);
            .title {
                flex: 1;
                text-align: center;
                padding-left: calc(24px * 2);
            }
            .taro-img {
                width: calc(24px * 2);
                height: calc(24px * 2);
            }
        }
        .content {
            text-align: left;
            font-size: calc(12px * 2);
            padding: 0 calc(12px * 2);
            .tip {
                color: #b5b8c2;
            }
            .tags {
                display: flex;
                margin-top: calc(8px * 2);
                flex-wrap: wrap;
                .tag {
                    min-width: calc(70px * 2);
                    min-height: calc(28px * 2);
                    padding: 0 calc(10px * 2);
                    display: flex;
                    box-sizing: border-box;
                    align-items: center;
                    justify-content: center;
                    background: #f5f6f7;
                    border-radius: calc(4px * 2);
                    margin-right: calc(10px * 2);
                    margin-bottom: calc(12px * 2);
                    &.active {
                        background-color: #fec800;
                    }
                }
            }
            .submit {
                margin: calc(12px * 2) 0;
                background-color: #fecb00;
                border: none;
            }
        }
    }
    &__box{
        &_header{
            position: relative;
            padding: 0 24px 40px 24px;
            background-color: #FFFFFF;
            box-sizing: border-box;
            &__number{
                line-height:60px;
                .item_number{
                    padding: 4px;
                    background-color: #BBBBBB;
                    font-size: 20px;
                    color: #FFFFFF;
                    border-radius: 2px;
                }
                .item_info{
                    padding-left: 16px;
                    font-size: 24px;
                    color: #666666;
                }
            }
            &__name{
                font-weight: 600;
                font-size: 36px;
                color: #333333;
                .item_name{
                    padding-left: 21px;
                    &:first-child{
                        padding-left: 0;
                    }
                }
            }

            &__info{
                display: flex;
                justify-content: space-between;
                // align-items: center;
                line-height: 40px;
                .item_info__left{
                    color: #999999;
                    font-size: 24px;
                    .item_left{
                        padding-left: 21px;
                        &:first-child{
                            padding-left: 0;
                        }
                    }
                }
                .item_info__right{
                    color: #999999;
                    font-size: 24px;
                    white-space: nowrap;
                    .item_right__text{
                        color: #FF5000;
                        font-size: 28px;
                    }
                }
            }

            &__time{
                font-size: 24px;
                color: #666666;
                line-height:44px;
                .item_time__padding{
                    padding-left: 10px;
                }
                .item_day__padding{
                    padding-left: 20px;
                }
            }

            &__list{
                margin-top: 9px;
                .item_list{
                    display: flex;
                    padding: 12px 0;
                    box-sizing: border-box;
                    // line-height:70px;
                    // align-items: center;
                    &__name{
                        width: 150px;
                        font-size: 30px;
                        color: #666666;
                        white-space: nowrap;
                    }
                    &__text{
                        margin-left: 41px;
                        flex: 1;
                        font-size: 30px;
                        color: #333333;
                    }
                }
            }
        }

        &_content{
            margin-top: 20px;
            padding: 0 24px;
            background-color: #FFFFFF;
            &__title{
                padding-top: 40px;
                padding-bottom: 51px;
                text-align: center;
                font-size: 30px;
                color: #333333;
            }
        }

        &_money{
            display: flex;
            align-items: center;
            justify-content: space-between;
            &__left,&__right{
                flex: 1;
                white-space: nowrap;
                font-size: 30px;
                color: #333333;
            }
            .item_right__text{
                color: #FF5000;
            }
        }

        &_btn{
            background-color: #FAFAFA;
            margin: 39px 25px 41px 25px;
        }
        &_userinfo{
            margin: 24px 0;
            display: flex;
            align-items: center;
            background-color: #fff;
            padding: 24px;
            &-img{
                width: 98px;
                height: 98px;
                vertical-align: middle;
            }
            &-text{
                padding-left: 24px;
            }
            &-name,&-text1,&-text2{
                font-size: 30px;
                color: #333333;
            }
            &-addre{
                font-size: 24px;
                color: #666;
            }
            &-telphone{
                font-size: 28px;
                color: #999;
            }
        }
        //  底部内容
        &_footer{
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            height:98px;
            background-color: #fff;
            box-sizing: border-box;
            border-top: 1PX solid #F8F8F8;
            z-index: 888;
            padding-bottom: constant(safe-area-inset-bottom);
            padding-bottom: env(safe-area-inset-bottom);
            box-sizing: border-box;
            &__list{
                display: flex;
                align-items: center;
                // padding: 5px 0px 10px 24px;
            }
            &__btn{
                display: flex;
                justify-content: center;
                align-items: center;
                flex: 1;
                margin: 0 40px;
            }
            &__item{
                display: flex;
                height: 98px;
                flex-direction: column;
                align-items: center;
                // width: calc(100% / 3);
                width: calc(100%);
                justify-content: center;
                &-image{
                    width: 48px;
                    height: 48px;
                    vertical-align: middle;
                }
                &-text{
                    font-size: 24px;
                    color: #666;
                }
            }
            .item_btn{
                width: 280px;
                height: 98px;
                line-height: 98px;
                text-align: center;
            }
        }

        &_addmoney{
            padding: 0 32px;
            &-title{
                height: 98px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                box-sizing: border-box;
            }
            &-cancel{
                font-size: 28px;
                color: #999999;
            }
            &-text{
                flex:1;
                font-size: 32px;
                color: #333333;
            }
            &-submit{
                font-size: 28px;
                color: #FFBE00;
            }
        }
    }
    &__active{
        padding-bottom: 98px;
    }
    .item_btn__default{
        font-size: 34px;
    }
    //  重置样式
    .at-list{
        padding: 0;
        &__item{
            &-content{
                font-size: 30px;
                color: #333333;
            }
            .item-extra__info{
                font-size: 30px;
                color: #FF5000;

            }
        }
    }
}
